<template>
  <div>
    <div class="bar">
      <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="section">
      <van-cell title="请填写收货地址" is-link />
      <div v-for="(item, index) in allInfo.checkList" :key="index">
        <div>
            <h4><van-icon name="shop-o" /> {{ item.shopname }}</h4>
        </div>
        <van-card
          :num="item.num"
          :price="item.shop_price"
          desc="描述信息"
         :title="item.product"
          :thumb="item.product_img"
        />
        <van-cell title="配送方式" value="快递 包邮" />
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
        <van-cell-group>
          <van-field
            label="卖家留言:"
            placeholder="(选填)可填写您与卖家达成一致的要求"
          />
        </van-cell-group>
        <div class="d1">
          <span>店铺合计(含运费)： </span><span>¥<span>{{item.num*item.shop_price}}</span></span>
        </div>
      </div>
    </div>
    <van-submit-bar :price="allInfo.checkPrice*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
export default {
  computed: {
    allInfo() {
      return this.$store.getters["ddk/allInfo"];
    },
     onSubmit() {
     console.log(1);
    },
  },
  data() {
    return {
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/cart");
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
  },
};
</script>

<style lang="less" scoped>
.van-submit-bar{
   padding-top: 50px;
}
.van-card {
  background: white;
}
.van-card:not(:first-child){
    margin: 0;
}
.section {
  background: #f4f4f4;
  height: 100%;
  padding: 10px;
  >div{
       h4{  margin: 0;
            margin-top:10px;
            font-weight: 500;
          }
      >div:nth-of-type(1){
          height: 35px;
          background: white;
          line-height: 35px;
         
      }
  }
}
.d1 {
  height: 40px;
  width: 100%;
  background: white;
  line-height: 40px;
  text-align: right;
  span {
    font-size: 12px;
  }
  span:nth-of-type(2) {
    color: red;
    span {
      font-size: 16px;
    }
    padding-right: 10px;
  }
}
.bar {
  position: relative;
}
.van-nav-bar__content {
  position: fixed;
  top: 0;
  left: 0;
}
</style>